
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>CSS <span class="color_h1">padding（填充）</span>
</h1>
<hr/>
<p class="intro">CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。</p>
<hr/>
<h2>padding（填充）</h2>
<p>当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。</p>
<p>单独使用 padding 属性可以改变上下左右的填充。</p>
<p><img decoding="async" src="//www.runoob.com/wp-content/uploads/2013/08/VlwVi.png"/></p>
<h2>可能的值</h2>
<table class="reference">
<tbody><tr>
<th align="left">值</th>
<th align="left">说明</th>
</tr>
<tr>
<td><i>length</i></td>
<td>定义一个固定的填充(像素, pt, em,等)</td>
</tr>
<tr>
<td><i>%</i></td>
<td>使用百分比值定义一个填充</td>
</tr>
</tbody></table>
<br/><hr/>
<h2>填充- 单边内边距属性</h2>
<p>在CSS中，它可以指定不同的侧面不同的填充：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
padding-top:25px;<br/>
padding-bottom:25px;<br/>
padding-right:50px;<br/>
padding-left:50px;</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<ul>
<li>上内边距是 25px</li>
<li>右内边距是 50px</li>
<li>下内边距是 25px</li>
<li>左内边距是 50px</li>
</ul>
<br/><hr/>
<h2>填充 - 简写属性</h2>
<p>为了缩短代码，它可以在一个属性中指定的所有填充属性。</p>
<p>这就是所谓的简写属性。所有的填充属性的简写属性是 <span class="marked">padding</span> :</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
padding:25px 50px;</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>Padding属性，可以有一到四个值。</p>
<p><b>  padding:25px 50px 75px 100px;</b></p>
<ul>
<li>上填充为25px</li>
<li>右填充为50px</li>
<li>下填充为75px</li>
<li>左填充为100px</li>
</ul>
<p><b>  padding:25px 50px 75px;</b></p>
<ul>
<li>上填充为25px</li>
<li>左右填充为50px</li>
<li>下填充为75px</li>
</ul>
<p><b>  padding:25px 50px;</b></p>
<ul>
<li>上下填充为25px</li>
<li>左右填充为50px</li>
</ul>
<p><b>  padding:25px;</b></p>
<ul>
<li>所有的填充都是25px</li>
</ul>
<hr/>
<div class="tryit_ex">
<img alt="Examples" decoding="async" height="46px" src="/images/tryitimg.gif" width="40"/><h2>更多实例</h2>
</div>
<p><a  target="_blank">在一个声明中的所有填充属性</a><br/>
这个例子演示了使用简写属性设置在一个声明中的所有填充属性，可以有一到四个值。</p>
<p><a  target="_blank">设置左部填充</a><br/>
这个例子演示了如何设置元素左填充。</p>
<p><a  target="_blank">设置右部填充</a><br/>
这个例子演示了如何设置元素右填充。.</p>
<p><a  target="_blank">设置上部填充</a><br/>
这个例子演示了如何设置元素上填充。</p>
<p><a  target="_blank">设置下部填充</a><br/>
这个例子演示了如何设置元素下填充。</p>
<hr/>
<h2>所有的CSS填充属性</h2>
<table border="1" cellpadding="0" cellspacing="0" class="reference" width="100%">
<tbody><tr>
<th align="left" width="20%">属性</th>
<th align="left" width="80%">说明</th>
</tr>
<tr>
<td><a >padding</a></td>
<td>使用简写属性设置在一个声明中的所有填充属性</td>
</tr>
<tr>
<td><a >padding-bottom</a></td>
<td>设置元素的底部填充</td>
</tr>
<tr>
<td><a >padding-left</a></td>
<td>设置元素的左部填充</td>
</tr>
<tr>
<td><a >padding-right</a></td>
<td>设置元素的右部填充</td>
</tr>
<tr>
<td><a >padding-top</a></td>
<td>设置元素的顶部填充</td>
</tr>
</tbody></table> <div class="scroll-top"><a >返回顶部</a></div>
</div>

    </body>
    </html>
    